<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .head-container {
            height: 70px;
            /* border: 1px solid red; */
            background-color: #242424;
        }

        .head-wrapper {
            width: 1100px;
            margin: 0 auto;
            /* border: 1px solid royalblue; */
            height: 100%;
        }

        .head-container-logo {
            width: 176px;
            height: 100%;
            /* border: 1px solid red; */
            float: left;
            background-image: url(./images/topbar.png);
            background-repeat: no-repeat;
        }

        .head-container-title {
            width: 508px;
            height: 100%;
            /* border: 1px solid red; */
            float: left;
        }

        .head-container-title li {
            font-size: 14px;
            float: left;
            padding: 0 19px;
            /* border: 1px solid red; */
            box-sizing: border-box;
            color: #ccc;
            line-height: 70px;
            text-align: center;
            cursor: pointer;
        }

        .head-container-title li.active {
            color: #fff;
            background-color: #000;
        }

        .head-container-title li:hover {
            color: #fff;
            background-color: #000;
        }

        .head-container-title li.last {
            position: relative;
        }

        .head-container-title li span {
            width: 28px;
            height: 19px;
            /* border: 1px solid red; */
            display: inline-block;
            position: absolute;
            top: 22px;
            right: -22px;
            background-image: url(./images/topbar.png);
            background-repeat: no-repeat;
            background-position: -191px 0px;
        }

        .head-container-title li.first {
            position: relative;
        }

        .head-container-title li.first span {
            width: 12px;
            height: 7px;
            display: inline-block;
            background-image: url(./images/topbar.png);
            background-repeat: no-repeat;
            background-position: -225px 1px;
            position: absolute;
            left: 40px;
            top: 63px;
        }

        .head-container-right1 {
            width: 158px;
            height: 32px;
            /* border: 1px solid red; */
            float: right;
            margin-top: 19px;
            background-color: #fff;
            border-radius: 16px;
            position: relative;
            padding-left: 24px;
            box-sizing: border-box;
        }

        .head-container-right2 {
            width: 90px;
            border: 1px solid #4F4F4F;
            float: right;
            height: 32px;
            margin: 19px 0 0 12px;
            border-radius: 16px;
            color: #ccc;
            font-size: 12px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
        }

        .head-container-right2:hover {
            color: #fff;
            border: 1px solid #ccc;
        }

        .head-container-right3 {
            width: 50px;
            border: 1px solid red;
            float: right;
            height: 45px;
            margin: 19px 0 0 20px;
        }

        .head-container-right1 input {
            width: 122px;
            height: 16px;
            margin-top: calc((32px - 16px)/2);
            border: none;
            outline: none;
        }

        .head-container-right1 span {
            position: absolute;
            left: 6px;
            top: 6px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(./images/topbar.png);
            background-repeat: no-repeat;
            background-position: -8px -104px;
        }

        /* title */
        .title-container {
            height: 35px;
            box-sizing: border-box;
            background-color: #C20C0C;
            border-bottom: 1px solid #a40011;
        }

        .title-wrapper {
            width: 1100px;
            height: 34px;
            margin: 0 auto;
        }

        .title-wrapper ul {
            padding-left: 180px;
        }

        .title-wrapper ul li {
            padding: 0 15px 0 11px;
            float: left;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            border-radius: 20px;
            height: 20px;
            margin: 7px 17px 0;
            text-align: center;
            cursor: pointer;
        }

        .title-wrapper ul li.active {
            background-color: #9B0909;
        }

        .title-wrapper ul li:hover {
            background-color: #9B0909;
        }

        /* 轮播图 */
        .banner-container {
            height: 285px;
            background-image: url(./images/109951165082803481.jpg);
            background-size: 6000px;
            background-position: center center;
            position: relative;
        }

        .banner-wrapper {
            width: 982px;
            height: 100%;
            margin: 0 auto;
        }

        .banner-lunbotu {
            width: 730px;
            height: 100%;
            float: left;
            position: relative;
        }

        .banner-lunbotu img {
            width: 100%;
            height: 100%;
        }

        .banner-right {
            width: 254px;
            height: 100%;
            float: left;
            margin-left: -2px;
            background-image: url(./images/download.png);
        }

        .banner-wrapper span {
            width: 37px;
            height: 72px;
            display: inline-block;
            position: absolute;
            top: calc((285px - 73px)/2);
            background-image: url(./images/banner.png);
            background-repeat: no-repeat;
            cursor: pointer;
        }

        .banner-wrapper .left {
            left: 60px;
            background-position: 0 -358px;
        }

        .banner-wrapper .left:hover {
            background-position: 0 -428px;
        }

        .banner-wrapper .right {
            right: 60px;
            background-position: 0 -506px;
        }

        .banner-wrapper .right:hover {
            background-position: 0 -576px;
        }

        .banner-lunbotu ul {
            position: absolute;
            bottom: 6px;
            left: calc((730px - 200px)/2);
        }

        .banner-lunbotu ul li {
            width: 20px;
            height: 20px;
            float: left;
            background-image: url(./images/dot.png);
            cursor: pointer;
        }

        .banner-lunbotu ul li.active {
            background-image: url(./images/dot_slt.png);
        }

        .banner-lunbotu ul li:hover {
            background-image: url(./images/dot_slt.png);
        }
    </style>
</head>

<body>
    <!-- <img src="./images/dot_slt.png" alt=""> -->
    <div class="head-container">
        <div class="head-wrapper">
            <div class="head-container-logo">

            </div>
            <ul class="head-container-title">
                <li class="active first">

                    发现音乐
                    <span></span>
                </li>
                <li>
                    我的音乐
                </li>
                <li>
                    朋友
                </li>
                <li>
                    商城
                </li>
                <li>
                    音乐人
                </li>
                <li class="last">
                    下载客户端
                    <span></span>
                </li>
            </ul>
            <div class="head-container-right3">
                登录
            </div>
            <div class="head-container-right2">
                创作者中心
            </div>
            <div class="head-container-right1">
                <span>

                </span>
                <input type="text" placeholder="音乐/视频/电台/用户">
            </div>
        </div>
    </div>

    <div class="title-container">
        <div class="title-wrapper">
            <ul>
                <li class="active">推荐</li>
                <li>排行榜</li>
                <li>歌单</li>
                <li>主播电台</li>
                <li>歌手</li>
                <li>新碟上架</li>
            </ul>
        </div>
    </div>
    <div class="banner-container">
        <div class="banner-wrapper">
            <span class="left"></span>
            <span class="right"></span>
            <div class="banner-lunbotu">

                <img src="./images/109951165080168682.jpg" alt="">
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="banner-right">

            </div>

        </div>

    </div>
</body>

</html>